<template>
    <div class="tabpie-box">

        <div class="right">
            <div style="display:flex;justify-content: flex-end;">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane :label="item.name" :name="item.value" v-for="(item,index) in data"
                        :key="item.name"></el-tab-pane>
                </el-tabs>
            </div>
            <EchartsPieLabel class="pie" labelUnit=""
                :extraLegend="{show:true,bottom: 'center', height:'100%',left:'3%', orient: 'vertical',}"
                :data="list[activeName]" :label="title" titleLeft="57%" :center="['60%','50%']"></EchartsPieLabel>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'Tabpie',
        components: {

        },
        props: {
            data: {
                // 返回的数据
                type: Array,
                default: function () {
                    return [];
                },
            },
        },
        data() {
            return {
                title: "车类型",
                activeName: "a",
                list: {
                    a: [
                        { name: "自家车流", value: 54 },
                        { name: "轨道公交", value: 34 },
                        { name: "客车", value: 42 },
                        { name: "货车", value: 23 },
                        { name: "出租/网约", value: 23 }
                    ],
                    b: [
                        { name: "青银高速", value: 143 },
                        { name: "黑龙江中路", value: 223 },
                        { name: "重庆中路", value: 456 },
                        { name: "环湾路", value: 234 },
                        { name: "九水路", value: 453 }
                    ],
                    c: [
                        { name: "00:00~03:00", value: 432 },
                        { name: "03:00~06:00", value: 235 },
                        { name: "06:00~09:00", value: 542 },
                        { name: "09:00~12:00", value: 253 },
                        { name: "12:00~15:00", value: 353 },
                        { name: "15:00~18:00", value: 233 },
                        { name: "18:00~21:00", value: 233 },
                        { name: "21:00~24:00", value: 124 },
                    ],
                    d: [
                        { name: "出口", value: 54 },
                        { name: "入口", value: 34 },
                    ]
                }


            };
        },
        created() { },
        mounted() { },
        methods: {
            handleClick({ label }) {
                this.title = label
                this.initPie()
            },
            click(e) {
                this.title = e
                this.initPie()
            },
            initPie() {
                for (let item of this.pie) {
                    item.value = item.value = (Math.round(Math.random() * 100)).toFixed(0)
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .tabpie-box {
        width: 100%;
        height: 100%;

        .right {
            float: right;
            width: 100%;
            height: 100%;

            .pie {
                width: 100%;
                height: calc(100% - 40px);
            }
        }
    }
</style>
<style lang="scss">
    .tabpie-box {
        .el-tabs__item {
            padding: 0 20px !important;
            color: #fff;
            font-weight: bold;
            font-size: 16px !important;
        }

        .el-tabs__item.is-active {
            color: #00cdf9;
        }
    }
</style>